<template>
  <div class="listContentBox ">
    <advancedQueryShrinkComponent ref="advancedQueryShrinkComponent" :labelLength="5" :queryData="queryData" @getQuery="getList" />
    <div class="listBox p-px-l-24 p-px-r-24 p-px-t-16">
      <el-row class="listBoxbtn m-px-b-16">
        <el-col :span="24">
          <el-button type="primary" @click="handleDialog('add','新增','')">新增弹窗</el-button>
          <el-button type="primary" @click="handleJump('add','')">新增form</el-button>
          <el-button type="primary" @click="handleExport()">导出</el-button>
        </el-col>
      </el-row>
      <div class="listBoxTable">
        <el-table ref="list" v-loading="listLoading" stripe :data="list" height="100%" @selection-change="(row)=>handleSelectionChangeMixins(row, 'id', 'selectTableList')">
<!--          <el-table-column type="selection" width="55" align="center" />-->
          <el-table-column label="序号" type="index" width="80" align="center" fixed="left">
            <template slot-scope="scope">
              <span>{{ pageIndex(scope.$index, queryData.queryParams) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="title" show-overflow-tooltip />
          <el-table-column label="金额 （元）" prop="amount" show-overflow-tooltip width="200">
            <template slot-scope="scope">
              {{ numberFormat(scope.row.amount,2,'.',',','round') }}
            </template>
          </el-table-column>
          <el-table-column label="时间" prop="time" show-overflow-tooltip width="190">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.registerTime ,'{y}-{m}-{d}  {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开关" prop="isGeneralContractor" width="100">
            <template slot-scope="scope">
              <!-- 布尔值约定  是：1（true），否：0(false) -->
              <el-switch v-model.trim="scope.row.isGeneralContractor" active-value="0" inactive-value="1" @change="handleSwitchChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="300">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDialog('view','详情',scope.row)">详情弹窗</el-button>
              <el-button type="text" @click="handleJump('view',scope.row)">详情form</el-button>
              <el-button type="text" @click="handleDownLoadMixins(scope.row.list)">下载</el-button>
              <el-button type="text" typeC="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>

            <template slot-scope="scope">
              <el-button type="text" @click="handleJump('edit',scope.row)">修改form</el-button>
              <el-button type="text" @click="handleJump('view',scope.row)">详情form</el-button>
              <el-dropdown @command="(command)=>handleCommandMixins(command,scope.row)">
                <span class="el-dropdown-link">
                  更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item typeC="danger" command="handleDelete">删除</el-dropdown-item>
                  <el-dropdown-item class="listDropdownItem" :command="{command:'handleConfirm',apiUrl:'',text:''}">confirm操作</el-dropdown-item>
                  <el-dropdown-item class="listDropdownItem" :command="{command:'handleDialog',type:'edit',typeName:'修改'}">修改弹窗形式</el-dropdown-item>
                  <el-dropdown-item class="listDropdownItem" :command="{command:'handleDialog',type:'view',typeName:'详情'}">详情弹窗形式</el-dropdown-item>
                  <el-dropdown-item class="listDropdownItem" :command="{command:'handleListDialog',type:'edit',typeName:'修改'}">list选择弹窗形式</el-dropdown-item>
                  <el-dropdown-item class="listDropdownItem" :command="{command:'handleListDialog',type:'view',typeName:'详情'}">list详情弹窗形式</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
          <!-- 列表缺省 -->
          <div slot="empty" class="zjm_no_data_table_list height-100 flex row-center col-center">
            <el-empty :image-size="70" description="暂无数据"></el-empty>
          </div>
        </el-table>
      </div>
      <pagination :total="listTotal" :page.sync="queryData.queryParams.pageNum" :limit.sync="queryData.queryParams.pageSize" @pagination="getList" />
    </div>
    <dialogForm ref="dialogForm"/>
    <dialogList ref="dialogList"/>
  </div>
</template>
<script>
// 混入
import { listMixins } from '@/mixins/publicMixins/listMixins'
// 组件
import advancedQueryShrinkComponent from '@/components/publicComponents/advancedQuery/indexShrink.vue'
import dialogForm from './component/dialogForm.vue'
import dialogList from './component/dialogList.vue'
// -------------------------------------------------------------
export default {
  name: 'List',
  mixins: [listMixins],
  components: { advancedQueryShrinkComponent, dialogForm, dialogList},
  provide() {
    return {
      listQueryParams: this
    }
  },
  data() {
    return {
      // 表格数据
      list: [
        { title: '标题',amount:'100000',isGeneralContractor:1,time:'2025-4-22 10:00:00'},
        { title: '标题1',amount:'100000.23',isGeneralContractor:1,time:'2025-4-22 10:00:00'},
        { title: '标题2',amount:'100000.33',isGeneralContractor:1,time:'2025-4-22 10:00:00'}
      ],
      // 查询条件+查询组
      queryData: {
        queryParams: {
          pageNum: 1, // 分页的初始值
          pageSize: 10 // 每页的显示数
        },
        data: [
          {
            label: '输入框', // 前端展示的label
            type: 'input', // 格式：input/select/date/money/number
            value: null, // 查询回填值
            valueKey: 'valueKey' // 查询入参Key
          },
          {
            label: '选择器Dict', // 前端展示的label
            type: 'select', // 格式：select
            value: null, // 查询回填值
            valueKey: 'selectDicts', // 查询入参Key
            typeData: [], // select类储存options
            dataType: 'dicts', // 获取储存options的类型  数据字典：dicts，其他接口获取：url
            getDicts: 'sys_user_sex', // 数据字典类型值
            multiple: true// 是不是多选
          },
          {
            label: '选择器Url', // 前端展示的label
            type: 'select', // 格式：select
            value: null, // 查询回填值
            valueKey: 'selectUrl', // 查询入参Key
            typeData: [], // select类储存options
            dataType: 'url', // 获取储存options的类型  数据字典：dicts，其他接口获取：url
            getUrl: '/api', // // 如果不是数据字典，把后台服务路径传入
            getUrlListBool: false, // 接口返回格式时候为常规数则  例如:[2020,2021]
            getUrlData: null, // 入参
            getUrlMethod: 'get', // 请求类型
            getUrlDictValue: 'id', // 回填时Value的key
            getUrlDictLabel: 'contractName', //  回填时Label的key
            multiple: false// 是不是多选
          },
          {
            label: '树形选择器', // 前端展示的label
            type: 'treeselect', // 格式：select
            value: null, // 查询回填值
            valueKey: 'treeselect', // 查询入参Key
            typeData: [], // tree类储存options
            dataType: 'url', // 获取储存options的类型  数据字典：dicts，其他接口获取：url
            getUrl: '/api', // // 如果不是数据字典，把后台服务路径传入
            getUrlData: null, // 入参
            getUrlMethod: 'get', // 请求类型
            normalizerObj: { id: 'menuId', label: 'menuName' }, // 需要重构的字段名称数组渲染数据时取值的obj   默认 { id: 'id', label: 'name' }  例如：{ id: 'menuId', label: 'menuName' }
            multiple: false// 是不是多选
          },
          {
            label: '年', // 前端展示的label
            type: 'year', // 格式：数字格式  回填至格式 yyyy
            startValue: null, // 区间开始查询回填值
            endValue: null, //  区间结束查询回填值
            startKey: 'startYear', // 区间开始查询入参Key
            endKey: 'endYear'// 区间结束查询入参Key
          },
          {
            label: '年月', // 前端展示的label
            type: 'month', // 格式：数字格式  回填至格式 yyyy-mm
            startValue: null, // 区间开始查询回填值
            endValue: null, //  区间结束查询回填值
            startKey: 'startAmount', // 区间开始查询入参Key
            endKey: 'endAmount'// 区间结束查询入参Key
          },

          {
            label: '年月日', // 前端展示的label
            type: 'date', // 格式：数字格式  回填至格式 yyyy-mm-dd
            startValue: null, // 区间开始查询回填值
            endValue: null, //  区间结束查询回填值
            startKey: 'startAmount', // 区间开始查询入参Key
            endKey: 'endAmount'// 区间结束查询入参Key
          },

          {
            label: '数字', // 前端展示的label
            type: 'number', // 格式：数字格式
            precision: 2, // 数值精度 默认0
            min: 0, // 可输入的最小值 默认0
            max: 999999999, // 可输入的最大值   默认10位
            startValue: null, // 区间开始查询回填值
            endValue: null, //  区间结束查询回填值
            startKey: 'startAmount', // 区间开始查询入参Key
            endKey: 'endAmount'// 区间结束查询入参Key
          }
        ]
      }
    }
  },
  mounted() {
    // this.getList()
  },
  created() {
  },
  methods: {

    /**
    * @description: 列表
    * @Author: 张佳敏
    * @param {*} queryParams
    * @return {*}
    */
    getList(queryParams) {
      // this.getListMixins('/question-bank/getPage', queryParams)
    },

    /**
     * @description: 跳转
     * @Author: baoxuhui
     * @param {*} type
     * @param {*} row  当前值
     * @param {*} url
     * @return {*}
     */
    handleJump(type, row, url = '') {
      const queryParams = {}
      if (row) {
        queryParams.id = row.id
      }
      this.handleJumpMixins(type, queryParams, url)
    },

    /**
     * @description: 导出按钮操作
     * @Author: baoxuhui
     * @return {*}
     */
    handleExport() {
      this.handleDownLoadFileMixins('/contract-info/download', this.$refs['advancedQueryShrinkComponent'].newData, '合同台账.xlsx')
    },

    /**
     * @description: 状态修改
     * @Author: baoxuhui
     * @param {*} row  当前值
     * @param {*} text 提示文字
     * @return {*}
     */
    handleSwitchChange(row, text) {
      text = row.status === 1 ? '启用' : '停用'
      const data = {
        id: row.id,
        status: row.status
      }
      this.handleSwitchChangeMixins('/project-company/update', data, text)
    },

    /**
     * @description: 删除
     * @Author: baoxuhui
     * @param {*} row  当前值
     * @return {*}
     */
    handleDelete(row) {
      console.log(row)
      const data = {
        id: row.id
      }
      const url = '/question-bank/removeById'
      this.handleDeleteMixins(url, data)
    },

    /**
     * @description: 弹窗确定后调取相应接口
     * @Author: baoxuhui
     * @param {*} row  当前值
     * @param {*} apiUrl api路径
     * @param {*} text 确认要 text 吗?
     * @return {*}
     */
    handleConfirm(row, apiUrl, text) {
      const data = {}
      this.handleConfirmMixins(apiUrl, data, text)
    },

    /**
     * @description: 打开弹窗
     * @Author: baoxuhui
     * @param {*} type //弹窗状态，add:'新增'，edit:修改，view:'详情'
     * @param {*} typeName //弹窗title '新增'，修改，'详情'
     * @param {*} row //参row
     * @return {*}
     */
    handleDialog(type, typeName, row) {
      this.$refs['dialogForm'].dialogFormVisibleBool = true
      this.$refs['dialogForm'].dialogFormType = type
      this.$refs['dialogForm'].dialogFormTitle = typeName
      // 弹窗 额外入参 需要时传入 不需要注释即可
      // this.$refs['dialogForm'].dialogFormExtra = {}
      // 弹窗 重置表单
      this.$refs['dialogForm'].dialogResetForm()
      if (type !== 'add') {
        this.$refs['dialogForm'].dialogDetailApi(row)
      }
    },

    /**
     * @description: 打开list弹窗
     * @Author: baoxuhui
     * @param {*} type //弹窗状态，edit:修改，view:'详情'
     * @param {*} typeName //弹窗 title 修改，'详情'
     * @param {*} row //参row
     * @return {*}
     */
    handleListDialog(type, typeName, row) {
      console.log(type, typeName, row)
      this.$refs['dialogList'].dialogListVisibleBool = true
      this.$refs['dialogList'].dialogListType = type
      this.$refs['dialogList'].dialogListTitle = typeName
      // 弹窗 额外入参
      // this.$refs['dialogList'].dialogListExtra = {}
      // 获取列表
      if (type !== 'add') {
        var data = {id: row.id}
        this.$refs['dialogList'].dialogGetList(data)
      }
    },
  }
}
</script>
